<template>
<!--      <div style="margin: 10px 0">-->
<!--        <label styly="width:50px">名称</label>-->
<!--        <el-input v-model="search" placeholder="请输入关键字" style="width: 30%"></el-input>-->
<!--        <el-button type="primary" style="margin-left: 5px">查询</el-button>-->
<!--      </div>-->
  <div style="padding: 10px">
<!--    功能区域,   管理员界面-->
<!--    <div style="width: 80%;margin:0 auto;padding:20px">-->
<!--      <el-button type="primary">新增</el-button>-->
<!--      <el-button type="primary">导入</el-button>-->
<!--      <el-button type="primary">导出</el-button>-->
<!--    </div>-->
<!--    搜索-->
    <div style="width:80%;margin:0 auto;padding: 10px">
      <label styly="width:150px">学校名称:</label>
      <el-input v-model="search1" placeholder="请输入关键字" style="width: 30%"></el-input>
      <el-button type="primary" style="margin-left: 5px" @click="load">查询</el-button>
    </div>
    <div class="radio">
      <label style="width: 150px">院校特点：</label>
      <el-radio-group v-model="search3">
        <el-radio :label="null">不限</el-radio>
        <el-radio :label="1">985</el-radio>
        <el-radio :label="2">211</el-radio>
        <el-radio :label="3">双一流</el-radio>
      </el-radio-group>
    </div>
    <div class="radio1">
      <label >院校属地：</label>
      <el-radio-group v-model="search2">
        <el-radio-button label="不限"></el-radio-button>
        <el-radio-button label="上海"></el-radio-button>
        <el-radio-button label="北京"></el-radio-button>
        <el-radio-button label="广东"></el-radio-button>
        <el-radio-button label="天津"></el-radio-button>
        <el-radio-button label="内蒙古"></el-radio-button>
        <el-radio-button label="重庆"></el-radio-button>
        <el-radio-button label="河北"></el-radio-button>
        <el-radio-button label="河南"></el-radio-button>
        <el-radio-button label="福建"></el-radio-button>
        <el-radio-button label="江西"></el-radio-button>
        <el-radio-button label="浙江"></el-radio-button>
        <el-radio-button label="江苏"></el-radio-button>
        <el-radio-button label="吉林"></el-radio-button>
        <el-radio-button label="辽宁"></el-radio-button>
        <el-radio-button label="山西"></el-radio-button>
        <el-radio-button label="安徽"></el-radio-button>
        <el-radio-button label="山东"></el-radio-button>
        <el-radio-button label="湖北"></el-radio-button>
        <el-radio-button label="湖南"></el-radio-button>
        <el-radio-button label="广西"></el-radio-button>
        <el-radio-button label="海南"></el-radio-button>
        <el-radio-button label="四川"></el-radio-button>
        <el-radio-button label="贵州"></el-radio-button>
        <el-radio-button label="云南"></el-radio-button>
        <el-radio-button label="西藏"></el-radio-button>
        <el-radio-button label="陕西"></el-radio-button>
        <el-radio-button label="甘肃"></el-radio-button>
        <el-radio-button label="青海"></el-radio-button>
        <el-radio-button label="宁夏"></el-radio-button>
        <el-radio-button label="新疆"></el-radio-button>
      </el-radio-group>
    </div>

    <el-table
      v-loading="loading"
      :data="tableData"
      border
      stripe
      style="width: 80%;margin:0 auto">
      <el-table-column
        prop="unname"
        label="学校">
      </el-table-column>
      <el-table-column
        prop="number"
        label="代码"
        sortable
      >
      </el-table-column>
      <el-table-column
        label="描述">

      </el-table-column>
    </el-table>
    <div style="margin:0 auto;padding-top: 20px;width: 80%">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import request from '../utils/request'
export default {
  data () {
    return {
      loading: true,
      search1: '',
      search2: '',
      search3: '',
      radio: 1,
      radio1: '不限',
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: [ ]
    }
  },
  created () {
    this.load()
  },
  methods: {
    load () {
      this.loading = true
      request.get('api/school', {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search1: this.search1,
          search2: this.search2,
          search3: this.search3
        }
      }).then(res => {
        this.loading = false
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    handleCurrentChange (pageNum) {
      this.currentPage = pageNum
      this.load()
    },
    handleSizeChange (pageSize) {
      this.pageSize = pageSize
      this.load()
    }
  }
}
</script>

<style scoped>
  .radio{
    width:80%;
    margin: 0 auto;
    padding: 10px;
  }
  .radio1{
    width:80%;
    margin:0 auto;
    padding:10px
  }

</style>
